<template>
  <div class="con user_scroll_item">
    <!-- <img src="@/assets/img/1.png" alt=""> -->
    <div v-if="info.inittime" class="time">
      {{ info.inittime }}
    </div>

    <!-- me -->
    <div v-if="info.from_id==$store.state.userdata._id" class="infoitem_me">
      <div v-if="info.content_text" class="mycontent_text">
        {{ info.content_text }}
      </div>
      <div v-if="!info.content_text" class="mycontent_img">
        <img :src="info.content_img" />
      </div>

      <div class="myheader">
        <img :src="$store.state.userdata.headerimg" />
      </div>
    </div>

    <!-- othor -->
    <div v-if="info.from_id!=$store.state.userdata._id" class="infoitem">
      <div class="otherheader">
        <img :src="otheruserdata.headerimg" />
      </div>
      <div v-if="info.content_text" class="othercontent_text">
        {{ info.content_text }}
      </div>
      <div v-if="!info.content_text" class="othercontent_img">
        <img :src="info.content_img" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: null,
    },
    otheruserdata:{
      type:Object,
      default:null
    }
  },
};
</script>

<style lang="less" scoped>
.infoitem_me {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 10px;

  .myheader {
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 1px solid #fff;
    }
  }

  .mycontent_text {
    font-size: 16px;
    background-color: #fff;
    padding: 14px 8px;
    margin: 0 10px 0 60px;
    position: relative;
    color: #333;

    &::before {
      position: absolute;
      top: -4px;
      right: -4px;
      content: "";
      width: 0;
      height: 0;
      font-size: 4px;
      border: 2px solid #fff;
      border-color: transparent transparent transparent #fff;
      transform: rotate(225deg);
    }
  }

  .mycontent_img {
    padding: 10px;
    text-align: left;

    img {
      max-width: 100px;
      border-radius: 5px;
    }
  }
}

.time {
  height: 25px;
  line-height: 25px;
  text-align: center;
  font-size: 12px;
  color: #555;
}

.infoitem {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;

  .otherheader {
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 0.5px solid #fff;
    }
  }

  .othercontent_text {
    font-size: 16px;
    background-color: #fff;
    padding: 14px 8px;
    margin: 0 60px 0 10px;
    position: relative;
    color: #333;

    &::before {
      position: absolute;
      top: -4px;
      left: -4px;
      content: "";
      width: 0;
      height: 0;
      font-size: 4px;
      border: 2px solid #fff;
      border-color: #fff transparent transparent transparent;
      transform: rotate(225deg);
    }
  }

  .othercontent_img {
    padding: 10px;
    text-align: left;

    img {
      max-width: 100px;
      border-radius: 5px;
    }
  }
}
</style>